import { FC, useContext } from "react";
import styles from "./index.module.less";
import Question from "@/components/Icons/nav/Question";
import Anomaly from "@/components/Icons/nav/Anomaly";
import Param from "@/components/Icons/nav/Param";
import Path from "@/components/Icons/nav/Path";
import cName from "classnames";
import { BigScreenContext, CurrentKey } from "../../context/BigScreenContext";

const NavMap = {
  question: <Question />,
  anomaly: <Anomaly />,
  param: <Param />,
  path: <Path />,
};
const Nav: FC = () => {
  const { currentKey, navList, setCurrentKey } = useContext(BigScreenContext);

  return (
    <div className={styles["nav-wrapper"]}>
      {navList?.map((item) => (
        <div
          key={item}
          className={cName(styles["item"], {
            [styles["active"]]: currentKey === item,
          })}
          onClick={() => {
            setCurrentKey(item as CurrentKey);
          }}
        >
          {NavMap[item]}
        </div>
      ))}
    </div>
  );
};
export default Nav;
